<template>
  <div class="warning-list">
    <a-list :data-source="warnings" :loading="loading" item-layout="horizontal">
      <template #renderItem="{ item }">
        <a-list-item>
          <template #actions>
            <a-button type="link" @click="$emit('handle', item, '处理')"> 处理 </a-button>
            <a-button type="link" @click="$emit('handle', item, '忽略')"> 忽略 </a-button>
          </template>

          <a-list-item-meta>
            <template #avatar>
              <a-avatar :src="item.avatar" size="large">
                {{ item.name?.charAt(0) }}
              </a-avatar>
            </template>

            <template #title>
              <div class="warning-title">
                <span class="name">{{ item.name }}</span>
                <a-tag :color="getWarningColor(level)" size="small">
                  {{ getWarningText(level) }}
                </a-tag>
              </div>
            </template>

            <template #description>
              <div class="warning-info">
                <div class="info-row">
                  <span>当前年龄: {{ item.currentAge }}岁</span>
                  <span>天定寿命: {{ item.destinedLifespan }}岁</span>
                  <span class="remaining">剩余: {{ item.remainingLife }}年</span>
                </div>
                <div class="info-row">
                  <span>地点: {{ item.location }}</span>
                  <span>职业: {{ item.profession }}</span>
                </div>
                <div class="progress-row">
                  <a-progress :percent="Math.round((item.currentAge / item.destinedLifespan) * 100)" :stroke-color="getProgressColor(level)" size="small" />
                </div>
              </div>
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  warnings: {
    type: Array,
    default: () => []
  },
  level: {
    type: String,
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['handle'])

const getWarningColor = (level) => {
  const colors = {
    high: 'red',
    medium: 'orange',
    low: 'green'
  }
  return colors[level] || 'default'
}

const getWarningText = (level) => {
  const texts = {
    high: '高危预警',
    medium: '中度预警',
    low: '正常'
  }
  return texts[level] || '-'
}

const getProgressColor = (level) => {
  const colors = {
    high: '#ff4d4f',
    medium: '#faad14',
    low: '#52c41a'
  }
  return colors[level] || '#d9d9d9'
}
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as *;

.warning-list {
  .warning-item {
    display: flex;
    align-items: center;
    padding: 16px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid $border-color;
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(255, 255, 255, 0.08);
      transform: translateY(-2px);
    }

    .warning-icon {
      font-size: 24px;
      margin-right: 16px;
    }

    .warning-info {
      flex: 1;

      .warning-title {
        font-weight: 500;
        color: $text-primary;
        margin-bottom: 4px;
      }

      .warning-desc {
        font-size: 12px;
        color: $text-secondary;
      }
    }

    .warning-actions {
      .ant-btn {
        margin-left: 8px;
      }
    }

    &.high {
      border-left: 4px solid #f5222d;
      background: rgba(245, 34, 45, 0.1);
    }

    &.medium {
      border-left: 4px solid #fa8c16;
      background: rgba(250, 140, 22, 0.1);
    }

    &.low {
      border-left: 4px solid #52c41a;
      background: rgba(82, 196, 26, 0.1);
    }
  }
}
</style>
